<template>
  <div class="RenderView">
    <router-view v-slot="{ Component }">
      <Transition name="fade" mode="out-in">
        <keep-alive :include="include" :max="10">
          <component :is="Component" />
        </keep-alive>
      </Transition>
    </router-view>
  </div>
</template>

<script>
import { reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'RenderView',
  setup() {
    const $route = useRoute()

    // 需要缓存的页面的name。
    const include = reactive(['RenderView', 'tree'])

    watch(
      $route,
      () => {
        // 通过路由配置需要缓存的页面
        if ($route.meta?.KeepAlive && !~include.indexOf($route.name)) include.push($route.name)
      },
      {
        immediate: true
      }
    )

    return { include, route: $route }
  }
}
</script>

<style>
.RenderView,
.RenderView-main {
  height: 100%;
  overflow: auto;
}
.RenderView > *:not(.RenderView, .RenderView-main) {
  padding: 20px;
  box-sizing: border-box;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 0.5s;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>